<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <!-- <link rel="stylesheet" href="../../css/sm.min.css">
  <link rel="stylesheet" href="../../css/sm-extend.min.css">
  <link rel="stylesheet" href="../../css/common.css">
  <script type="text/javascript" src="../../common/common.js"></script>

  <link rel="stylesheet" href="../../css/swiper.min.css"> -->
  
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/common.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>

  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/swiper.min.css">

  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      width: auto;
      padding: 0 1rem;
      font-size:14px;
    }

    .page.page-current{
      overflow: auto;
    }

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
        <header class="bar bar-nav" hidden>
            <h1 class="title">金天头条</h1>
        </header>
     

      <!-- 页面内容区域 -->
      <!-- Swiper -->
      <div class="swiper-container" style="height: 2rem;">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide" style="font-size:14px;">推荐</div>
          <div class="swiper-slide" style="font-size:14px;">热点</div>
          <div class="swiper-slide" style="font-size:14px;">中心店报</div>
          <div class="swiper-slide" style="font-size:14px;">视频</div>
          <div class="swiper-slide" style="font-size:14px;">养生</div>
          <div class="swiper-slide" style="font-size:14px;">生活</div>
          <div class="swiper-slide" style="font-size:14px;">趣味</div> -->
          <div class="swiper-slide" onclick="totitle(0)">推荐</div>
          <div class="swiper-slide" onclick="totitle(1)">热点</div>
          <div class="swiper-slide" onclick="totitle(2)">中心店报</div>
          <div class="swiper-slide" onclick="totitle(3)">视频</div>
          <div class="swiper-slide" onclick="totitle(4)">养生</div>
          <div class="swiper-slide" onclick="totitle(5)">生活</div>
          <div class="swiper-slide" onclick="totitle(6)">趣味</div>
          
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

            <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                <div class="list-block media-list" style="margin:0 0;">
                    <ul class="the_list">
                      <li>
                        <div class="item-content" style="padding-right:0.75rem;">
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">纯文本(title)</div>
                              <!-- <div class="item-after">17:14</div> -->
                            </div>
                            <!-- <div class="item-subtitle">子标题</div> -->
                            <div class="item-text">此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...</div>
                            <div>
                                <span>2018.13.13</span>
                                <span>赞32</span>
                                <span>评论123</span>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                          <div class="item-content" style="padding-right:0.75rem;">
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">图片(picture)</div>
                                <!-- <div class="item-after">17:14</div> -->
                              </div>
                              <!-- <div class="item-subtitle">子标题</div> -->
                              <div class="item-text">此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...</div>
                              <div>
                                  <span>2018.13.13</span>
                                  <span>赞32</span>
                                  <span>评论123</span>
                              </div>
                            </div>
                            <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style="width:90%;" alt="">
                            </div>
                          </div>
                      </li>
                      <li>
                          <div style="height:6rem;">
                            <!-- <video style="height:100%;width:100%;" src="a89061286757b5c17be19ce3359f5ac9.mp4" controls="controls">
                            </video> -->
                            <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style="width:90%;height: 90%;margin: 5%;" alt="">
                          </div>
                          <div class="item-content" style="padding-right:0.75rem;">
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">视频(video)</div>
                                <!-- <div class="item-after">17:14</div> -->
                              </div>
                              <!-- <div class="item-subtitle">子标题</div> -->
                              <div class="item-text">此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...此处是文本内容...</div>
                              <div>
                                <span>2018.13.13</span>
                                <span>赞32</span>
                                <span>评论123</span>
                              </div>
                            </div>
                          </div>
                      </li>
                    </ul>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>



        <!-- 返回顶部样式 -->
  <div class="top top_fixed">
      <a id="tops" href="#">回顶部</a>
    </div>
      

      




    </div>
  </div>
  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>


<!-- Swiper JS -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>


<script type="text/javascript">
  

  // 回到顶部
  goTop()

  //放函数区域
  var swiper;
  function toSwiper() {
    swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      // slidesPerView: 5,
      // centeredSlides: true,
      spaceBetween: 1,
      grabCursor: true,
      freeMode: true,
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
    });
  }

function totitle(slideNum){
  // alert(theVal)
  console.log(slideNum)
  // swiper.slideTo(slideNum, 0);
  // swiper.slideTo(2, 0);
}


      // 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;

      // 每次加载添加多少条目
      var itemsPerLoad = 20;

      function addItems(data) {
        // number, lastIndex
        console.log(1)
              // 生成新条目的HTML
              var html = '';
              for (var i = 0; i <= data.length; i++) {
                  html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + (i + limit) + '</div></div></li>';
              }
              // 添加新条目
              $('.the_list').append(html);

      }

      // 上次加载的序号

      var lastIndex = 20;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;

              if (lastIndex >= maxItems) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }

              // 添加新条目
              addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              lastIndex = $('.the_list li').length;
              console.log(lastIndex)
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });



var offset = 0;
var limit = 10;
function getData(){
    var params = {}
    net_request('get','api/v1/mallproducts?limit='+limit+'&offset='+ offset,params,successCallBack,errorCallBack);
    // $.toast('开清请求接口');
  }

  function successCallBack(data){
    offset += limit;
    // alert(JSON.stringify(data));
    // 预先加载数量
    if(isNotNull(data)){
      if(isNotNull(data.data)){
        if(isNotNull(data.data.list)){
          addItems(data.data.list);
        }
      }
    }
  }
  function errorCallBack(data){
    // alert(JSON.stringify(data));
  }





  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }





  	
    // 初始化
    $(function(){
      $.init();
      toSwiper();
      getData();
    });
  </script>
</body>
</html>